iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

卡卡30天學 React Native系列 第 14

[ 卡卡 DAY 14 ] - React Native 頁面導覽 Navigation (中)

  • 分享至 

  • xImage
  •  

昨天的文章中已將 navigation 安裝完成
今天就要開始當導覽王了!
一起來轉頁吧吧吧~

事先準備

  1. 先建立一個頁面來當跳轉的頁面
   .src
   ├── assets
   │   └── icons
   │   └── icon-winning.png
   │   └── actionPrimary.png
   ├── common
   ├── components
   │   └── Flex1.js
   ├── constants
   │   ├── assets.js
   │   ├── index.js
   │   └── style.js
   ├── screens /// 在這裡
   │   └── IconScreen.js // 我使用了上次的 IconScreen 頁面 XD
   └── utils

懶得寫的人可以直接沿用我之前的 code XD

import React from 'react';
import {Image, View, Text} from 'react-native';
import {assets, SIZE, fonts} from '@src/constants';

const IconScreen = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      {/* <Flex1 /> */}
      <Text style={fonts.h3}>我是h3</Text>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'black',
        }}>
        {console.log('height:', SIZE.height, 'width:', SIZE.width)}
        <Image style={{width: 30, height: 30}} source={assets.winIcon} />
      </View>
    </View>
  );
};
export default IconScreen;

Stack 基本介紹

  • Stack:儲存參與 Stack 導覽的頁面,導覽以頁面為單位,每一頁面都是一個 js 檔,可以各自設定 Stack 的 Screen。

接下來簡單介紹一下 Stack.Navigator

在這邊我只列出基本常用的,詳細的請參考網址

props

  • initialRouteName
    default 畫面名稱
  • screenOptions
    header default 畫面設定
  • detachInactiveScreens(bool)
    是否應將非活動畫面從視圖層次結構中分離以節省內存
  • keyboardHandlingEnabled(bool)
    鍵盤是否自動打開

screenOptions props

  • headerTintColor
  • headerTitleStyle
  • headerMode
  • headerShown(bool)

接下來簡單介紹一下 Stack.Screens

在這邊我只列出基本常用的,詳細的請參考網址

props

  • name - 有點像頁面 id,Stack的名稱
  • component - 對應的js檔
  • options - 頁面 header 及一些選項設定

options props

  • title - 頁面名字
  • style - 客製自己的 header 除了高度
  • headerStyle - 特別指定 header 的高度
  • headerRight - header 左邊的客製化
  • headerLeft - header 右邊的客製化
  • leftButton - 左邊按鈕設定

Stack 設定

  1. 於 App.js 引入 screen 以及設定 Stack
import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Text, View} from 'react-native';
import IconScreen from '@screens/IconScreen'; // 引入 IconScreen

const Stack = createStackNavigator();


// Home 為首頁, 也是可以自己開一個 screen 檔案
const Home = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home Screen</Text>
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"> // initialRouteName 設定初始的頁面我指向 Home
        <Stack.Screen name="Home" component={Home} /> // name 就像是頁面的id ; component 為指定的component頁面
        <Stack.Screen name="IconScreen" component={IconScreen} />  // Stack 新加入頁面
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
  1. 加入 Stack.Screen 系列的 options props

    基本上倘若每個畫面的 header opetions 類似,我會先把它寫成一個 constant 帶入
    來給大家一個例子包含:

    1. 裝置的樣式判斷
    2. 路由的參數判斷
    3. 左右 header 客製樣式修改
const headerOptions = ({ route, navigation }) => ({
    title: route.params ? route.params.title : props.title ? props.title : "",
    // 路由的參數判斷
    headerTintColor: "black",
    // 字體顏色
    headerTitleStyle: { alignSelf: "center", fontSize: 16 }, // header 樣式
    headerStyle: {
      height: Platform.OS === "ios" ? 88 : 44,
    },
    // 使用裝置來判斷 header 的高度
    headerRight: () => (
      <Image source={assets.actionPrimary} style={[styles.actionPrimary]} />
    ),
    // 右邊放入圖
    headerLeft: () => (
     <TouchableOpacity
      onPress={() => {
        navigation.goBack();
      }}>
      <Image
        source={assets.actionPrimary}
        style={[styles.actionPrimary]}
        onPress={() => {
          navigation.goBack();
        }}
      />
    </TouchableOpacity>
    ),
    // 左邊放入圖並使用 navigation.goBack()  回上一頁
   =
  });

再放入 App.js

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" >
        <Stack.Screen name="Home" component={Home} options={headerOptions} /> // 放!
        <Stack.Screen name="IconScreen" component={IconScreen} options={headerOptions} /> // 放!
      </Stack.Navigator>
    </NavigationContainer>
  );
};

下指令

npm run ios

https://ithelp.ithome.com.tw/upload/images/20210928/201420119x53QYu1JF.png

表頭!!!出現了~~

Day 14 done!!! 下一篇是跳轉頁面跟回上一頁的教學


上一篇
[ 卡卡 DAY 13 ] - React Native 頁面導覽 Navigation (上)
下一篇
[ 卡卡 DAY 15 ] - React Native 頁面導覽 Navigation (下)
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言